<template>
  <dv-full-screen-container>
    <dv-loading v-if="loading">
      <div color-white>Loading...</div>
    </dv-loading>
    <div class="header"><HeaderItem /></div>
    <div class="main">
      <div class="left">
        <div class="lcrtitem">
          <ItemBorder title="作业分析"><LeftItem1 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="作业分级管控"><LeftItem2 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="风险点分析"><LeftItem3 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="作业风险等级月度分析"><LeftItem4 /></ItemBorder>
        </div>
      </div>
      <div class="center">
        <div class="lcrtitem"><CenterItem1 /></div>
        <div class="lcrtitem"><CenterItem2 /></div>
        <div class="lcrtitem2">
          <div class="centeritem"><CenterItem3 /></div>
          <div class="centeritem"><CenterItem4 /></div>
        </div>
        <div class="lcrtitem2">
          <div class="centeritem">
            <ItemBorder title="环境"></ItemBorder>
          </div>
          <div class="centeritem">
            <ItemBorder title="职业健康"></ItemBorder>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="lcrtitem">
          <ItemBorder title="隐患统计"><RightItem1 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="隐患分析"><RightItem2 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="隐患排查奖励"><RightItem3 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="设备风险"><RightItem4 /></ItemBorder>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<script>
import HeaderItem from '@views/website/headeritem.vue'
import ItemBorder from '@comp/ItemBorder/index.vue'
import CenterItem1 from '@views/website/centeritem1.vue'
import CenterItem2 from '@views/website/centeritem2.vue'
import CenterItem3 from '@views/website/centeritem3.vue'
import CenterItem4 from '@views/website/centeritem4.vue'
import CenterItem5 from '@views/website/centeritem5.vue'
import CenterItem6 from '@views/website/centeritem6.vue'
import LeftItem1 from '@views/website/leftitem1.vue'
import LeftItem2 from '@views/website/leftitem2.vue'
import LeftItem3 from '@views/website/leftitem3.vue'
import LeftItem4 from '@views/website/leftitem4.vue'
import RightItem1 from '@views/website/rightitem1.vue'
import RightItem2 from '@views/website/rightitem2.vue'
import RightItem3 from '@views/website/rightitem3.vue'
import RightItem4 from '@views/website/rightitem4.vue'
export default {
  name: 'WebSite',
  components: {
    ItemBorder,
    HeaderItem,
    CenterItem1,
    CenterItem2,
    CenterItem3,
    CenterItem4,
    CenterItem5,
    CenterItem6,
    LeftItem1,
    LeftItem2,
    LeftItem3,
    LeftItem4,
    RightItem1,
    RightItem2,
    RightItem3,
    RightItem4
  },
  data() {
    return {
      loading: false
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 80px;
}

.main {
  display: flex;
  height: 100%;
  .left {
    width: 25%;
    display: flex;
    flex-direction: column;
  }

  .center {
    width: 50%;
  }

  .centeritem {
    width: 50%;
    height: 100%;
  }

  .right {
    width: 25%;
  }
  .lcrtitem {
    padding: 0 2px 5px;
    height: calc(25% - 30px);
    overflow: hidden;
  }
  .lcrtitem2 {
    padding: 0 2px 5px;
    height: calc(25% - 30px);
    display: flex;
    overflow: hidden;
  }
}
</style>
